<template>
    <el-container height="100%">
        <el-header height="35px">
        </el-header>
        <el-main>
            <el-table border :data="tableData">
                <el-table-column prop="ID" label="ID"></el-table-column>
                <el-table-column prop="input" label="input"></el-table-column>
                <el-table-column prop="output" label="output"></el-table-column>
                <el-table-column prop="groupA" label="groupA"></el-table-column>
                <el-table-column prop="score" label="score"></el-table-column>
                <el-table-column prop="type" label="type"></el-table-column>
            </el-table>
        </el-main>
        <el-footer></el-footer>
    </el-container>
</template>

<script setup lang="ts">
import { ElMain, ElTable, ElFooter, ElContainer, ElHeader, ElTableColumn } from 'element-plus'
import { computed } from 'vue';
import Studycodemodel from '../../../mysql_interface/studycodemodel';

const p = defineProps<{ ID: number, question?: Studycodemodel.Iquestion, start: () => Studycodemodel.Iquestion }>()
const tableData = computed(() => {
    return p.question?.testcases || []
})
</script>